<template>
	<view class="p-black" v-if="show" @tap="show = false" >
		<view class="p-white" @tap.stop="" >
			<view class="p-white-title">{{title}}</view>
			<view class="p-white-form" >
				<view>姓名</view>
				<input placeholder="请输入姓名" v-model="name" class="p-white-input" />
			</view>
			<view class="p-white-form" >
				<view>身份证</view>
				<input placeholder="请输入身份证" type="idcard" v-model="idcard" maxlength="18" class="p-white-input" />
			</view>
			<view class="p-white-footer" >
				<view class="p-white-btn" @tap="show = false" >取消</view>
				<view class="p-white-btn p-white-btn-confirm" @tap="confirm" >确认</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		props:{ title:{} },
		data(){
			return {
				name : '',
				idcard : '',
				show:false,
			}
		},
		methods:{
			confirm(){
				if(!this.name)return this.toast('请输入姓名');
				if(!this.idcard)return this.toast('请输入身份证');
				if(this.idcard.length != 18)return this.toast('请输入正确的身份证');
				this.ajax('index/checkCard',{
					data:{
						id_card : this.idcard
					},
					success:(res) => {
						if(res.code == 1) {
							this.show = false;
							this.$emit('change',{name : this.name,id_card : this.idcard});
							this.name = '';
							this.idcard = '';
						} else {
							this.toast(res.msg);
						}
					}
				});
				
			}
		}
	}
</script>

<style>
	.p-black{
		position: fixed;
		width: 100%;
		height: 100%;
		top:0;
		left:0;
		background-color: rgba(0,0,0,0.5);
		z-index: 9;
	}
	.p-white{
		position: absolute;
		width: calc(100% - 80upx);
		padding: 40upx;
		background-color: #FFFFFF;
		left: 0;
		bottom: 0;
	}
	.p-white-title{
		font-size: 36upx;
		text-align: center;
		margin-bottom: 40upx;
	}
	.p-white-form{
		display: flex;
		align-items: center;
		border-bottom: 1upx solid #EEEEEE;
	}
	.p-white-input{
		height: 100upx;
		flex: 1;
		text-align: right;
	}
	.p-white-footer{
		display: flex;
		align-items: center;
		margin-top: 30upx;
	}
	.p-white-btn{
		flex: 1;
		text-align: center;
		height: 100upx;
		color: #5180F9;
		border: 1upx solid #5180F9;
		box-sizing: border-box;
		line-height: 100upx;
		border-radius: 50upx;
		font-size: 32upx;
	}
	.p-white-btn-confirm{
		border: 0;
		margin-left: 40upx;
		background-image: linear-gradient(to top,#5180F9,#4EB5FD);
		color: #FFFFFF;
	}
</style>
